<template>
  <h3>{{ x }}</h3>
  <button @click="x++">点我加1</button>
  <h1>{{ name }}</h1>
  <h1>{{ age }}</h1>
  <h1>{{ job.j1.salary }}</h1>
  <h1 v-show="person.car">汽车信息{{ person.car }}</h1>
  <button @click="name += '-'">点击修改名字</button>
  <button @click="age++">点击修改年龄</button>
  <button @click="job.j1.salary++">涨</button>
  <button @click="showRawPerson">输出最原始的person</button>
  <button @click="addCar">给人添加一台车</button>
  <button @click="person.car.name+='!'">改车的名字</button>
  <button @click="person.car.price++">改车的价格</button>
</template>
  
<script>
import { ref, reactive, toRef, toRefs, shallowReactive, shallowRef, toRaw,markRaw  } from "vue";

export default {
  name: "Demo",

  setup() {
    let person = reactive({
      name: "林润钿",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    let x = ref(0);

    function showRawPerson(){
      const p=toRaw(person)  //p不是响应式的 只对应用reactive的对象起作用
      p.age++
      console.log(p);
    }

    function addCar(){
      let car={name:'奔驰', price:40}
      //person.car=car  //往它身上追加的东西  东西也是响应式的
      person.car=markRaw(car)  //不再是响应式的了 一直都是原始的了  数据改了  但没有响应式
    }

    return {
      person,  //由于setup()只执行一次 所以toRefs只执行一次 那么后加入的属性 就还是得加person 所以得把person return出去
      ...toRefs(person),
      x,
      showRawPerson,
      addCar
    };
  },
};
</script>
  
  <style>
</style>
  